<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        fieldset{
            width: 600px;
            margin: 150px auto;
            border: 0px;
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>修改密码</legend>
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="150px" class="demo-ruleForm">

            <el-form-item label="请输入原密码" prop="oldPassword">
                <el-input type="password" v-model="info.oldPassword" ></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码" prop="newPassword">
                <el-input type="password" v-model="info.newPassword" ></el-input>
            </el-form-item>
            <el-form-item label="请重复密码" prop="repeatPassword">
                <el-input type="password" v-model="info.repeatPassword" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('info')">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
            </el-form-item>
        </el-form>
    </fieldset>
</div>

<script>
    var haha=new Vue({
        el:"#app",
        data:{
            info:{},
            rules: {
                oldPassword: [
                    { required: true, message: '请输入原密码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11个字符', trigger: 'blur' }

                ],
                repeatPassword: [
                    { required: true, message: '请输入重复密码', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11个字符', trigger: 'blur' }

                ]

            }
        },
        methods:{
            submitForm(formName) {
                if (haha.info.newPassword!=haha.info.repeatPassword){
                    haha.$notify.error({
                        title: '温馨提示',
                        message:"新密码上下不匹配"
                    });
                } else {
                    haha.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.post("/demo/user/changePassword",haha.info,function (backData) {
                                if(backData.code==0){
                                    haha.$notify.error({
                                        title: '温馨提示',
                                        message:backData.msg
                                    });
                                }else if (backData.code == 1) {
                                    haha.$message({
                                        message: backData.msg,
                                        type: 'success'
                                    });
                                    if(window.parent.length>0)
                                        window.parent.location="/demo/userr/userLogin.html";

                                }
                            })
                        }
                    });

                }

            },

        }
    });
</script>
</body>
</html>